<template>
        <tm-overlay v-model:show="_show" contentAnimation @close="onCloseProps">
            <view @click.stop="">
                <tm-sheet :width="640" :height="940" style="border-radius: 10rpx;">
                    <view class="options">
                        <view class="user-info">
                            <view class="user-img">
                                <image :src="props.userInfo?.photo||'/static/head.jpg'" class="touxiang"></image>
                            </view>
                            <view class="user-name">
                                <view class="name">{{props?.userInfo?.nickName}}</view>
                                <view class="id">ID:{{props?.userInfo?.id}}</view>
                            </view>
                        </view>
                        <view class="erweima">
                            <image class="qr" :src="props.qrcode" mode="" />
                        </view>
                        <view class="open">
                            打开轻盈扫一扫，加我为好友。
                        </view>
                        <tm-button class="btn_main w-center" :width="594" round="5" :shadow="-1" :linear-color="['#64F1C5', '#29DBA3']"
                            linear="left" :fontSize="32" fontColor="#ffffff" @tap="saveCode" label="保存图片至相册"></tm-button>
                        <image src="/static/userinfo/guanbi.png" class="guanbi" @click="onCloseProps"></image>
                    </view>
                </tm-sheet>
            </view>
        </tm-overlay>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
    defineProps,
    defineEmits
} from "vue";


import { pathToBase64,base64ToPath } from 'image-tools'
import {
    showLoading,
    closeLoading,
    saveImg,
} from "@/utils/utils";

const props: any = defineProps({
    userInfo:{
        type:Object,
        default(){
            return {}
        }
    },
    codePopup: Boolean,
    qrcode:String,
});

const _show = ref(true)

watch(()=>props.show,(val)=>{
    _show.value = val;
})

const astk:any = ref(true);
const zIndex:any=ref(-1)
let saveLoading = false;

const saveCode = async ()=>{
    if(saveLoading){
        return;
    }
    saveLoading = true;
    showLoading();




    const path = await base64ToPath(props.qrcode).catch(()=>{
        closeLoading();
        saveLoading = false;
        uni.showToast({
            icon: "none",
            title: "保存图片失败",
        });
    });

    const result = await saveImg(path).catch(()=>{
        closeLoading();
        saveLoading = false;
        uni.showToast({
            icon: "none",
            title: "保存图片失败",
        });
    });


    if(result){
        closeLoading();
        uni.showToast({
            icon: "none",
            title: "图片已保存至相册",
        });
        setTimeout(()=>{
            closeLoading();
            saveLoading = false;
        },300)
    }
}

const emit = defineEmits(['openCodePopup']);
const onCloseProps = () => {
    emit("openCodePopup", false);
}

onMounted(()=>{
    console.log('props.userInfo')
    console.log('props.userInfo')
    console.log('props.userInfo')
    console.log(props.userInfo)
})

</script>
<style lang="scss">
.gender {
    width: 100%;
}

.options {
    width: 100%;
    position: relative;

    .user-info {
        width: 100%;
        height: 172rpx;
        display: flex;
        align-items: center;

        .user-img {
            width: 120rpx;
            height: 120rpx;
            box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
            border: 6rpx solid #FFFFFF;
            border-radius: 10rpx;
            border-radius: 50%;
            overflow: hidden;

            .touxiang {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .user-name {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left:5rpx;

            .name {
                font-size: 32rpx;
                color: #333333;
            }

            .id {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }

    }

    .erweima {
        width: 582rpx;
        height: 582rpx;
        background: #F5F5F5;
        margin: 0 auto;
        .qr{
            width:582rpx;
            height:582rpx;
        }

    }

    .open {
        width: 100%;
        height: 86rpx;
        line-height: 86rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        width: 100%;
        text-align: center;
    }

    .btn_main {
		font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
    }

    .guanbi {
        width: 52rpx;
        height: 52rpx;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -190rpx;
        margin: 0 auto;
    }
}
</style>    